<template>
	<div class="dict-container">
		<a-card title="字典管理">
			<template #extra>
				<a-button type="primary" @click="handleAdd">添加字典</a-button>
			</template>
			<a-table :columns="columns" :dataSource="dataSource" :pagination="false">
				<template #bodyCell="{ column, record }">
					<template v-if="column.key === 'action'">
						<a @click="handleEdit(record)">
							<FormOutlined/>
						</a>
						<a-divider type="vertical"/>
						
						<a-popconfirm
								cancel-text="在考虑下～"
								ok-text="删除"
								title="确定要删除吗？"
								@confirm="handleDelete(record)"
						>
							<a>
								<DeleteOutlined style="color: #f00"/>
							</a>
						</a-popconfirm>
					</template>
				</template>
			</a-table>
		</a-card>
		<a-modal
				v-model:open="open"
				:cancelText="formState._id ? '取消' : '取消'"
				:okText="formState._id ? '更新' : '保存'"
				:title="formState._id ? '编辑' : '新增'"
				@ok="handleOk"
		>
			<a-form
					ref="formRef"
					:label-col="{ span: 5 }"
					:model="formState"
					:rules="rules"
			>
				<a-form-item v-if="formState._id" label="_id">
					<a-input v-model:value.trim="formState._id" disabled></a-input>
				</a-form-item>
				<a-form-item label="命名空间" name="name">
					<a-input v-model:value.trim="formState.name"></a-input>
				</a-form-item>
				<a-form-item label="label" name="label">
					<a-input v-model:value.trim="formState.label"></a-input>
				</a-form-item>
				<a-form-item label="value" name="value">
					<a-input v-model:value.trim="formState.value"></a-input>
				</a-form-item>
				<a-form-item label="描述">
					<a-textarea v-model:value.trim="formState.description" :rows="4">
					</a-textarea>
				</a-form-item>
			</a-form>
		</a-modal>
	</div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { DeleteOutlined, FormOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { addDict, delectDict, editDict, getDictList } from '@/api/dict'

const open = ref(false) // 弹窗
const formRef = ref()
const formState = ref({
	name: '',
	label: '',
	value: '',
	description: '',
	_id: ''
})
// 规则
const rules = {
	name: [
		{
			required: true,
			message: '请输入名称',
			trigger: 'blur'
		}
	],
	label: [
		{
			required: true,
			message: '请输入标签',
			trigger: 'blur'
		}
	],
	value: [
		{
			required: true,
			message: '请输入值',
			trigger: 'blur'
		}
	]
}

// 表格
const dataSource = ref([
	{
		key: '1',
		name: '胡彦斌',
		age: 32,
		address: '西湖区湖底公园1号'
	},
	{
		key: '2',
		name: '胡彦祖',
		age: 42,
		address: '西湖区湖底公园1号'
	}
])
const columns = [
	{
		title: '命名空间',
		dataIndex: 'name',
		key: 'name'
	},
	{
		title: 'label',
		dataIndex: 'label',
		key: 'label'
	},
	{
		title: 'value',
		dataIndex: 'value',
		key: 'value'
	},
	{
		title: '描述',
		dataIndex: 'description',
		key: 'description'
	},
	{
		title: '操作',
		dataIndex: 'action',
		key: 'action'
	}
]

/**
 * 获取列表
 */
const getList = async () => {
	const { data, success, msg } = await getDictList()
	if (success) {
		dataSource.value = data || []
		message.success(msg)
	} else {
		dataSource.value = data || []
		message.error(msg)
	}
}

/**
 * 删除
 */
const handleDelete = async (record) => {
	const { success, msg } = await delectDict({ _id: record._id })
	if (success) {
		getList()
		message.success(msg)
	} else {
		message.error(msg)
	}
}

/**
 * 编辑
 */
const handleEdit = async (record) => {
	console.log(record)
	formState.value = {
		label: record.label,
		description: record.description,
		name: record.name,
		value: record.value,
		_id: record._id
	}
	open.value = true
}

/**
 * 添加
 */
const handleAdd = () => {
	console.log('添加')
	formState.value = {
		label: '',
		description: '',
		name: '',
		value: '',
		_id: ''
	}
	open.value = true
}

/**
 * 更新或者编辑
 */
const createAndEdit = async () => {
	const params = formState.value
	const { data, msg, success } = params?._id
			? await editDict(params)
			: await addDict(params)
	console.log('添加')
	if (success) {
		open.value = false
		formRef.value.resetFields()
		getList()
	} else {
		message.error(msg)
	}
}

/**
 * 弹窗ok
 */
const handleOk = () => {
	//   open.value = false;
	
	console.log('ok', formRef.value)
	
	formRef.value
			.validate()
			.then((value) => {
				console.log('校验通过')
				createAndEdit()
			})
			.catch((err) => {
				console.log('校验不通过', err)
			})
}
onMounted(() => {
	getList()
})
</script>
<style lang="scss" scoped>
</style>
